<template>
  <div class="itemUpload">
    <div>
      <el-upload
        ref="upload"
        drag
        action="#"
        :on-change="uploadFile"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-progress
        style="margin: 20px 0"
        :text-inside="true"
        :stroke-width="26"
        :percentage="progress"
      ></el-progress>
    </div>
  </div>
</template>

<script>
import { getOssConfig } from "@/api/menu";
export default {
  data() {
    return {
      progress: 0,
    };
  },
  created() {},
  methods: {
    async uploadFile(files, fileList) {
      console.log(files);
      let file1 = files.raw;
      let fileName = files.name;

      let res = await getOssConfig();
      if (res.code == 200) {
        let OSS = require("ali-oss");
        let client = new OSS({
          bucket: "bridgebj", //上传的文件夹
          region: "oss-cn-beijing",
          accessKeyId: res.data.accessKeyId,
          accessKeySecret: res.data.accessKeySecret,
          stsToken: res.data.securityToken,
          expiration: res.data.expiration,
          secure: true,
        });

        const options = {
          // 获取分片上传进度、断点和返回值。
          progress: (p, cpt, res) => {
            console.log(p);
            if (p == 1) {
              console.log("上传完成");
              this.progressWord = "上传完成";
            }
            this.progress = Number((p * 100).toFixed(0)); //进度条
          },
          // 设置并发上传的分片数量。
          parallel: 9999,
          // 设置分片大小。默认值为1 MB，最小值为100 KB。
          partSize: 1024 * 1024 * 3,
          timeout: 580000, //设置超时时间
        };

        async function multipartUpload() {
          console.log("开始分片上传");
          try {
            //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
            //经过测试如何前面加上文件夹 上传会出现NoSuchKey错误 所以我前面增加复制文件代码
            let result = await client.multipartUpload(fileName, file1, {
              ...options,
            });
            console.log("返回结果");
            console.log(result);
            let head = await client.head(file1.name);
            console.log(result.res.requestUrls);
            var url = result.res.requestUrls[0];
            console.log("文件地址");
            console.log(url);
            //可以处理自己的业务todo
          } catch (e) {
            // 捕获超时异常。
            console.log("上传异常");
            this.progress = 0;
            console.log(e);
          }
        }
        multipartUpload(); //调用函数
      }
    },
    timestamp() {
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      console.log(y);
      return (
        "" +
        y +
        "/" +
        this.add0(m) +
        "/" +
        this.add0(d) +
        "/" +
        this.add0(h) +
        "/" +
        this.add0(mm) +
        "/" +
        this.add0(s)
      );
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
  },
};
</script>

<style lang="scss" scoped></style>
